<template>
  <div>
    <div class="back" @click="changefather('defaultcom')">&lt;&lt;基本信息</div>
    <div v-for="(item,index) in fanListCopy" :key="index" class="user-item">
      <div class="user-item-left" @click="goOther(item.userId)">
        <img class :src="'/api/upload/' + item.userImg" alt />
        <div>{{item.userName}}</div>
      </div>
      <div class="user-item-right">
        <div
          class="button"
          :style="{backgroundColor:item.newId==null?'#ccc':'#e6a23c',color:item.newId==null?'#000':'#fff'}"
          @click="toggleSatus(item.newId,item.userId,index)"
        >{{concernText(item.newId)}}</div>
      </div>
    </div>

    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="8"
        :total="totalNum"
        @current-change="handleCurrentChange"
        @prev-click="handleCurrentChange"
        @next-click="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import "@/assets/style/global.css";
import "@/styles/myElPagination.scss";
export default {
  mounted() {
    this.$axios
      .post("/api/users/getMyFans")
      .then(res => {
        this.fanList = res.data.results;
        this.fanListCopy =
          this.fanList.length > 8 ? this.fanList.slice(0, 8) : this.fanList;
        this.totalNum = res.data.results.length;
      })
      .catch(err => {
        console.log("err", res);
      });
  },
  data() {
    return {
      fanList: [],
      bgColor: "",
      btnText: "",
      totalNum: 0,
      fanListCopy: []
    };
  },
  methods: {
    goOther(id) {
      this.$router.push({ path: "/othercenter", query: { userId: id } });
    },
    changefather(p1) {
      this.$parent.changesoncom(p1);
    },
    concernText(id) {
      if (id) {
        return "取消关注";
      } else {
        return "关注";
      }
    },
    toggleSatus(status, uid, index) {
      if (status) {
        this.openMsgBox(uid, index);
      } else {
        this.fanList[index].newId = uid;
        this.addConcern(uid);
      }
    },
    openMsgBox(id, index) {
      this.$confirm("您确定要取消关注吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      }).then(() => {
        this.fanList[index].newId = null;
        this.removeConcern(id);
      });
    },
    removeConcern(uid) {
      this.$axios
        .post("/api/users/removeFocus", { reuserId: uid })
        .then(res => {
          console.log("res", res);
        })
        .catch(err => {
          console.log("err", err);
        });
    },
    addConcern(uid) {
      let time = new Date();
      const month =
        time.getMonth() + 1 > 10
          ? time.getMonth() + 1
          : "0" + (time.getMonth() + 1);
      const day = time.getDate() > 9 ? time.getDate() : "0" + time.getDate();
      const date = time.getFullYear() + "-" + month + "-" + day;
      console.log(date);
      this.$axios
        .post("/api/users/focus", { reuserId: uid, conTime: date })
        .then(res => {
          console.log("关注", res);
        })
        .catch(err => {
          console.log("err", err);
        });
    },
    handleCurrentChange(currentPage) {
      this.fanListCopy = this.fanList.slice(
        (currentPage - 1) * 8,
        this.totalNum - 8 * (currentPage - 1) >= 8
          ? currentPage * 8
          : this.totalNum
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.back {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #e6a23c;
  margin-bottom: 15px;
}
.back:hover {
  color: #e6a23c;
  opacity: 0.8;
}
.user-item {
  line-height: 2;
  width: 100%;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  .user-item-left {
    display: flex;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 20px;
    }
  }
  .user-item-right {
    .button {
      height: 40px;
      width: 100px;
      border-radius: 10px;
      background-color: #e6a23c;
      line-height: 40px;
      text-align: center;
    }
    .button:hover {
      opacity: 0.8;
    }
  }
}
.user-item:hover {
  background-color: #fdfad8;
}
</style>